<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 
    事件的绑定：
    1.通过元素的属性绑定
    2.通过dom编程动态绑定
    注意事项：
    1.一个事件可以同时绑定多个函数
    2.一个元素可以同时绑定多个事件



    常见的事件
    1.鼠标事件 onclick ondbclick  onmouseover onmouseleave
    2.键盘事件 onleydown onkeyup 
    3.表单事件 onfocus onblur onchange onsubmit onreset
    4.页面的加载 onload 

    事件的触发
    1.行为的触发
    2.dom编程触发

 -->
<script>
    function fun1(){
      console.log("单击了")

    }
    function fun2(){
        console.log("单击了1")
    }
    function fun3(){
        alert("双击了")
    }
    function fun4(){
        console.log("鼠标悬停了");
    }
    function fun5(){
        console.log("鼠标移动了");
    } 
    function fun6(){
        console.log("鼠标离开了");
    }
    function fun7(){
        console.log("键盘按下了");
    }
    function fun8(){
        console.log("键盘抬起了");
    }
   
    

    function testFocus(){
        console.log("获得了焦点");
    }
    function testBlur(){
        console.log("获得了焦点");
    }
    function testChange(value){
        console.log("内容改变了"+value);
    }
    function testChange1(value){
        console.log("内容改变了1"+value);
    }
    function testSubmit(){
        alert("表单发生提交了")
        event.preventDefault();//阻止组件的默认行为
    }
</script>
<body>

    <form action="" method="get" onsubmit="testSubmit()">


        用户名: <input type="text" name="realName" id="" 
        onfocus="testFocus()" onblur="testBlur()" onchange="testChange(this.value)">
        <br>
        登陆账号：<input type="text" name="loginName" id="">
        <br>
        <input type="submit" value="注册" name="" id="">
        <input type="reset" value="清空" name="" id="">
        <br>
        选择籍贯：
            <select name="" id="" onchange="testChange1(this.value)" >
                <option value="a">北京</option>
                <option value="b">上海</option>
                <option value="c">广州</option>

            </select>
    </form>
    <!-- <input type="button"  value="按钮" id="" onclick="fun1(),fun2()" ondblclick="fun3()">
    <br>
    <input type="text"  width="100px"  name="" id="" onkeydown="fun7()"  onkeyup="fun8()"> -->
    <!-- <img src="img/微信图片_20231213224954.jpg" alt="" onmouseover="fun4()"
    onmousemove="fun5()" onmouseleave="fun6()">
     -->
</body>
</html>